<!-- 首页 -->
<script setup>
import { onMounted, ref } from "vue";
import { useCommodityStore } from "@/stores/commodity";
import { debounce } from "lodash";

const commodityStore = useCommodityStore();

// 监听事件
onMounted(() => {
    window.addEventListener("scroll", handleScroll);
});
// 屏幕滚动事件（自动添加商品列表）
// 注意：滚动调用时有时候会多次触发，所以需要做好防抖处理
const handleScroll = () => {
    let scrollTop = window.scrollY || document.documentElement.scrollTop;
    let windowHeight = window.innerHeight;
    let documentHeight = document.documentElement.scrollHeight;
    // 检查是否到达底部
    if (
        scrollTop + windowHeight >= documentHeight - 50 &&
        !commodityStore.loading
    ) {
        commodityStore.getOverview(); // 调用接口加载更多商品
    }
};
</script>




<template>
    <el-main class="main-container">
        <!-- 推荐商品栏 -->
        <el-row class="recommend-commodity">
            <el-col :span="24" class="recommend-commodity-title">
                <text>为您找到</text>
            </el-col>
            <el-col
                class="recommend-commodity-box"
                :span="6"
                v-for="item in commodityStore.overview"
                :key="item.id"
            >
                <router-link :to="`/commodity/Detail/${item.commodityId}`">
                    <el-card class="recommend-commodity-card" shadow="hover">
                        <img
                            class="recommend-commodity-card-picture"
                            :src="item.coverImage"
                        />
                        <div class="commodity-title">
                            {{ item.commodityTitle }}
                        </div>
                        <template #footer>
                            <div class="commodity-price">
                                {{ item.commodityPrice }}￥
                            </div>
                        </template>
                    </el-card>
                </router-link>
            </el-col>
        </el-row>
    </el-main>
</template>



<style scoped lang = "scss">
@import "@/assets/style/config.scss";

/* 全局下划线设置 */
* {
    text-decoration: none;
}

.main-container {
    width: 80%;
    margin: 0 auto;
}
.recommend-commodity {
    width: 100%;
    margin-top: 50px;
}

.recommend-commodity-title {
    text-align: center;
    font-size: 30px;
}

.recommend-commodity-box {
    margin-top: 10px;
}

.recommend-commodity-card {
    width: 95%;
    border-radius: 10px;
}
.recommend-commodity-card:hover {
    box-shadow: 0 0 15px rgba(223, 45, 45, 0.3);
}

.commodity-title {
    max-height: 4em; /* 调整这个值以适应你的需要 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.commodity-price {
    font-size: 18px;
    color: rgb(211, 74, 74);
    text-align: right;
}

.recommend-commodity-card-picture {
    width: 100%;
}
</style>
